<template>
    <div ref="editor" style="text-align:left"></div>
</template>

<script>
    /**
     * copy G:\jk-yun-supplier-cms\src\components\ueditor\Editor.vue
     * 无
     * */
    import E from 'wangeditor'

    export default {
        inject: ['utils'],
        props: {
            value: '',
            disabled: Boolean,
            config: Object,
        },
        data() {
            this.editor = null
            return {}
        },
        methods: {
            updateView(newVal) {
                this.editor.txt.html(newVal)
            },
            updateViewDisabled(newVal) {
                if (newVal) {
                    this.editor.$textElem.attr('contenteditable', false)
                } else {
                    this.editor.$textElem.attr('contenteditable', true)
                }
            },
        },
        watch: {
            // 不要使用immediate，页面加载时手动触发一次
            value(newVal) {
                this.updateView(newVal)
            },
            disabled(newVal) {
                this.updateViewDisabled(newVal)
            },
        },
        mounted() {
            const editor = this.editor = new E(this.$refs.editor)

            // editor.customConfig.debug = true
            editor.customConfig.uploadImgServer = this.api.fileServer.uploadFile

            // 推荐使用onblur
            editor.customConfig.onchange = html => {
                this.$emit('input', html)
                this.utils('validate', this.editor.txt.text())
            }

            editor.customConfig.uploadFileName = 'file'
            editor.customConfig.uploadImgMaxLength = 50
            editor.customConfig.pasteFilterStyle = false
            editor.customConfig.uploadImgHeaders = {
                'Authorization': 'Bearer ' + window.$cookies.get('token_back')
            }
            editor.customConfig.zIndex = 1
            editor.create()

            // 初始化
            this.updateView(this.value)
            this.updateViewDisabled(this.disabled)

        }
    }
</script>

<style scoped>
</style>
